<template>
	<view>
		<form>
			<view class='addAddress'>
				<view class='list'>
					<view class='item acea-row row-between-wrapper'>
						<view class='shopType'><em style="color:#f00;margin-right:10rpx;">*</em>开户银行</view>
						<picker v-model="bankInfo.bankName" mode='selector' :range="bankNameList"
							 @change="bankName_change" range-key='name'>
							<view class="uni-input pickerView" v-if="bankInfo.bankName!==''">
								{{bankNameList[bankInfo.bankName].name}}
							</view>
							<view v-else style="color:#ccc;">
								请选择开户银行
							</view>
						</picker>
					</view>
					<view class='item acea-row row-between-wrapper'>
						<view class='name'><em style="color:#f00;margin-right:10rpx;">*</em>银行账号</view>
						<input type='text' placeholder='请输入银行账号' v-model="bankInfo.bankAccount"
							placeholder-class='placeholder'></input>
					</view>
					<view class='item acea-row row-between-wrapper'>
						<view class='name'>支行名称</view>
						<input type='text' placeholder='请输入支行名称' v-model="bankInfo.bankBranch"
							placeholder-class='placeholder'></input>
					</view>
					<view class='item acea-row row-between-wrapper'>
						<view class='name'>银行代码</view>
						<input type='text' placeholder='请输入银行代码' v-model="bankInfo.swiftCode"
							placeholder-class='placeholder'></input>
					</view>
					<view class='item acea-row row-between-wrapper'>
						<view class='name'><em style="color:#f00;margin-right:10rpx;">*</em>支付密码</view>
						<input type='password' placeholder='请输入支付密码'  v-model="bankInfo.payPassword"
							placeholder-class='placeholder'></input>
					</view>
					<view class='item acea-row row-between-wrapper'>
						<view class='name'>手机号码</view>
						<input type='text' placeholder='请输入手机号码' disabled v-model="bankInfo.mobile"
							placeholder-class='placeholder'></input>
					</view>
					<view class='item acea-row row-between-wrapper' style="position:relative">
						<view class='name'><em style="color:#f00;margin-right:10rpx;">*</em>验证码</view>
						<input type='text' placeholder='请输入验证码' v-model="bankInfo.dxCode"
							placeholder-class='placeholder'></input>
						<view class="dxCodeBox" @click="getUpMemberBankSmsCode" v-if="isFirstDxCode">获取验证码</view>	
						<view class="dxCodeBox" style="color:#ccc;" v-else>
							<view v-if="dxCodeTime>0">剩余 {{dxCodeTime}}s</view>
							<view v-else style="color:#f00;" @click="getAgain">再次获取</view>
						</view>
					</view>
				</view>
				<button class='keepBnt bg-color' @click="saveFunc">立即保存</button>
				<view class="messageBox">
					<view>1、修改银行信息后，我们将在今后的业务来往中以您修改后的信息为准。</view>
					<view>2、修改银行信息将验证您的支付密码，请您保管好密码。</view>
				</view>
				
			</view>
		</form>
	</view>
</template>

<script>
	import {
		getAllBank,
		getUpMemberBankSmsCode,
		setModifyBankSubmit,
		getMemberBank
	} from '@/api/directSelling.js'
	export default {
		data() {
			return {
				bankInfo:{
					bankName:"",
					bankId:"",
					bankAccount:"",
					bankBranch:"",
					swiftCode:"",
					payPassword:"",
					mobild:"",
					dxCode:"",
					routingNo:""
				},
				bankNameList:[],
				isFirstDxCode:true,
				dxCodeTime:60,
				dxCodeTimeFun:null
			};
		},
		onLoad(options) {
			this.getMemberBank();
			this.bankInfo.mobile=uni.getStorageSync('userInfo').mobile||"";
		},
		methods: {
			getMemberBank(){
				getMemberBank().then((res)=>{
					let data=res.data;
						getAllBank().then((res)=>{
							let listdata=res.data;
							this.bankNameList=listdata;
							this.bankNameList.forEach((ele,ind)=>{
								if(ele.dictId==data.bankId){
									this.bankInfo.bankName=ind;
									this.bankInfo.bankId=data.bankId;
								}
							})
						})
					this.bankInfo.bankAccount=data.bankAccount;//银行账号
					this.bankInfo.bankBranch=data.bankBranch;//支行名称
					this.bankInfo.swiftCode=data.swiftCode;//银行代码
					this.bankInfo.payPassword=data.payPassword;//支付密码
					this.bankInfo.bankAccountName=uni.getStorageSync('userInfo').realName;
					console.log(this.bankInfo);
					console.log(data);
				})
			},
			
			bankName_change(e){
				this.bankInfo.bankName=e.detail.value;
				this.bankInfo.bankId=this.bankNameList[this.bankInfo.bankName].dictId;
			},
			getUpMemberBankSmsCode(){
				let mobile=this.bankInfo.mobild;
				getUpMemberBankSmsCode(mobile).then((res)=>{
					let data=res.data;
					if(res.meta.success==true){
						this.$util.Tips({
							title: '验证码发送成功'
						});
						this.setdxCodeTime();
					}
				})
			},
			setdxCodeTime(){
				this.isFirstDxCode=false;
				this.dxCodeTimeFun=setInterval(()=>{
					if(this.dxCodeTime>0){
						this.dxCodeTime=this.dxCodeTime-1;
					}else{
						clearInterval(this.dxCodeTimeFun);
					}
					this.$forceUpdate();
				},1000)
			},
			//再次获取
			getAgain(){
				this.dxCodeTime=60;
				this.getUpMemberBankSmsCode();
			},
			saveFunc(){
				if(!this.bankInfo.bankName){
					this.$util.Tips({
						title: '开户银行不能为空！'
					});
					return;
				}
				if(!this.bankInfo.bankAccount){
					this.$util.Tips({
						title: '银行账号不能为空！'
					});
					return;
				}
				if(!this.bankInfo.payPassword){
					this.$util.Tips({
						title: '支付密码不能为空！'
					});
					return;
				}
				if(!this.bankInfo.dxCode){
					this.$util.Tips({
						title: '验证码不能为空！'
					});
					return;
				}
				setModifyBankSubmit(this.bankInfo).then((res)=>{
					if(res.meta.success==true){
						this.$util.Tips({
							title: "银行卡信息修改成功"
						});
						setTimeout(()=>{
							uni.navigateTo({
								url: "/pages/electronicWallet/bankCardDo/withdrawalBankInformation"
							});
						},2000)
					}
				}).catch((err)=>{
					this.$util.Tips({
						title: err
					});
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	body,page{
		padding:0!important;
		box-sizing: border-box;
	}
	.addAddress .list {
		background-color: #fff;
		padding: 0 30rpx;
		box-sizing: border-box;
	}

	.addAddress .list .item {
		padding: 30rpx;
		border-top: 1rpx solid #eee;
	}

	.addAddress .list .item .name {
		width: 195rpx;
		font-size: 30rpx;
		color: #333;
	}

	.addAddress .list .item .address {
		// width: 412rpx;
		flex: 1;
		margin-left: 20rpx;
	}

	.addAddress .list .item input {
		width: 400rpx;
		font-size: 30rpx;
		text-align: left;
	}

	.addAddress .list .item .placeholder {
		color: #ccc;
	}

	.addAddress .list .item picker {
		width: 410rpx;
		height: 42rpx;
	}

	.addAddress .list .item picker .picker {
		width: 350rpx;
		font-size: 30rpx;
		text-align: right;
	}

	.addAddress .list .item picker .iconfont {
		font-size: 43rpx;
	}

	.addAddress .default {
		padding: 0 30rpx;
		height: 90rpx;
		background-color: #fff;
		margin-top: 23rpx;
	}

	.addAddress .default checkbox {
		margin-right: 15rpx;
	}

	.addAddress .keepBnt {
		width: 690rpx;
		height: 86rpx;
		border-radius: 50rpx;
		text-align: center;
		line-height: 86rpx;
		margin: 50rpx auto;
		font-size: 32rpx;
		color: #fff;
	}

	.addAddress .wechatAddress {
		width: 690rpx;
		height: 86rpx;
		border-radius: 50rpx;
		text-align: center;
		line-height: 86rpx;
		margin: 0 auto;
		font-size: 32rpx;
		color: #fe960f;
		border: 1px solid #fe960f;
	}
	.dxCodeBox{
		position:absolute;
		right:10rpx;
		top:30rpx;
		color:#f00;
		font-size:28rpx;
	}
	.messageBox{
		padding:20rpx 30rpx;
		box-sizing: border-box;
		margin-top:20rpx;
	}
</style>
